<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script charset="UTF-8" src="<%=request.getContextPath()%>/js/jquery-1.12.4.min.js"></script>
    <script src="<%=request.getContextPath()%>/frontEndjs/reserveVerify.js"></script>
    <script src="<%=request.getContextPath()%>/frontEndjs/reserveAjax.js"></script>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        input {
            /* border: none; */
            outline: none;
        }

        body {
            display: flex;
            width: 100%;
            height: 100%;
        }

        .left-box {
            flex: 3;
            height: 697px;
            background-color: #f1f1f1;
        }

        .left-img {
            width: 300px;
            height: 600px;
            margin: 50px 20px 0px 200px;
        }

        .left-img img {
            position: relative;
            right: 130px;
            width: 400px;
            height: 300px;
        }

        .left-box h1 {
            position: relative;
            bottom: 260px;
            left: 200px;
        }

        .left-box a {
            position: relative;
            top: 30px;
            left: 200px;
        }

        .first h2 {
            margin-bottom: 10px;
        }

        .first p {
            margin: 0px 0px 20px 20px;
        }
        .first .price{
            color: red;
        }
        .first span{
            margin-left: 20px;
        }

        .two h2 {
            margin-bottom: 10px;
        }

        .two p {
            margin: 0px 0px 20px 20px;
        }

        .two button {
            width: 140px;
            height: 30px;
            margin-left: 20px;
            background-color: #dd4c40;
            color: #ffffff;
            font-size: 18px;
            border: none;
        }

        .come{
            text-decoration: none;
            color: #333333;
            font-size: 20px;
        }

        .p1{
            position: relative;
            right: 240px;
            bottom: 20px;
        }

        .div_addresident{
            width: 1336px;
            height: 653px;
            background: url("../img/frontEndImg/1001.jpg") no-repeat;
            background-size: 1336px 653px;
            position: relative;
            left: 200px;
            top: 50px;
        }
        .addresident_form p:nth-of-type(1){
            width: 800px;
            height: 50px;
            font-size: 40px;
            line-height: 50px;
            text-align: center;
        }
        .addresident_div{
            width: 1000px;
            height: 70px;
            line-height: 70px;
        }
        #addresident_div_select1{
            width: 60px;
            height: 30px;
            line-height: 30px;
            font-size: 16px;
            border-radius: 5px;
            margin-right: 35px;
        }
        #addresident_div_select2{
            width: 60px;
            height: 30px;
            line-height: 30px;
            font-size: 16px;
            border-radius: 5px;
            margin-right: 35px;
            text-align: center;
            display: none;
        }
        #addresident_div_select3{
            width: 60px;
            height: 30px;
            line-height: 30px;
            font-size: 16px;
            border-radius: 5px;
            text-align: center;
        }
        .addresident_form_p{
            height: 50px;
            line-height: 50px;
        }
        .form_p_input{
            border:1px solid dimgrey;
            width: 180px;
            height: 30px;
            font-size: 14px;
            border-radius: 5px;
            text-indent: 1em;
        }
        #add_manageName{
            position: relative;
            left: 32px;
        }
        #add_manageName_span{
            display: inline-block;
            width: 320px;
            text-indent: 1.5em;
            position: relative;
            left: 32px;
        }
        #add_mobilePhone{
            position: relative;
            left: 16px;
        }
        #add_mobilePhone_span{
            display: inline-block;
            width: 320px;
            text-indent: 1.5em;
            position: relative;
            left: 16px;
        }
        #add_identityCard_span{
            display: inline-block;
            text-indent: 1.5em;
            width: 310px;
        }
        #add_remark{
            position: relative;
            left: 32px;
        }
        #add_password{
            position: relative;
            left: 16px;
        }
        #add_price{
            position: relative;
            left: 32px;
        }
        .add_form_button{
            border: 1px solid #C4A275;
            border-radius: 5px;
            background: #C4A275;
            color: white;
            width: 60px;
            height: 32px;
            line-height: 32px;
            margin-top: 15px;
            margin-left: 34px;
        }
        .verify{
            color: darkgrey;
        }
        .verify_true{
            width: 30px;
            height: 30px;
            position: relative;
            left: 5px;
            top: 12px;
            background: url("../img/housing/formValidator/y.png") no-repeat;
            background-size: 23px 23px;
            color: green;
        }
        .verify_false {
            background: url("../img/housing/formValidator/n.png") no-repeat 0 15px;
            background-size: 23px 23px;
            color: red;
        }
    </style>
</head>
<body>
<div class="left-box">
    <a href="#" class="come">${cim.manageName},您好</a>
    <div class="left-img">

    </div>
    <h1>${display.houseType}</h1>
</div>

<div class="div_addresident">
    <form method="post" action="<%=request.getContextPath()%>/FrontEnd?type=reserve" class="addresident_form" id="add_form">
        <p class="p1">预约房间</p>
        <div class="addresident_div">
            <span>状态:</span>
            <select name="condition" id="addresident_div_select1" required>
                <option value="2">预约</option>
            </select>

            <select name="roomNumber" id="addresident_div_select2" required>

            </select>

            <span>居住人数:</span>
            <select name="personNum" id="addresident_div_select3" required>
                <option value="1">1</option>
                <option value="2">2</option>
            </select>
        </div>
        <input id="appPath" type="hidden" value="<%=request.getContextPath()%>">
        <input type="hidden" name="houseTypeId" id="left_img_input" value="${display.id}">
        <p class="addresident_form_p">
            <span>姓名:</span>
            <input type="text" name="manageName" id="add_manageName" class="form_p_input" required>
            <span id="add_manageName_span"></span>
        </p>
        <p class="addresident_form_p">
            <span>手机号:</span>
            <input type="text" name="mobilePhone" id="add_mobilePhone" class="form_p_input" required>
            <span id="add_mobilePhone_span"></span>
        </p>
        <p class="addresident_form_p">
            <span>身份证号:</span>
            <input type="text" name="identityCard" id="add_identityCard" class="form_p_input" required>
            <span id="add_identityCard_span"></span>
        </p>
        <p class="addresident_form_p">
            <span>入住时间:</span>
            <input type="date" name="checkInDate" id="add_checkInDate" class="form_p_input" required>
            <span id="add_checkInDate_span"></span>
            <span>退房时间:</span>
            <input type="date" name="checkOutDate" id="add_checkOutDate" class="form_p_input" required>
            <span id="add_checkOutDate_span"></span>
        </p>
        <p class="addresident_form_p">
            <span>备注:</span>
            <input type="text" name="remark" id="add_remark" class="form_p_input">
            <span id="add_remark_span"></span>
        </p>
        <p class="addresident_form_p">
            <span>订单号:</span>
            <input type="text" name="password" readonly="readonly" id="add_password" class="form_p_input" required>
            <span id="add_password_span"></span>
        </p>
        <p class="addresident_form_p">
            <span>金额:</span>
            <input type="text" name="price" readonly="readonly" id="add_price" class="form_p_input" value="${display.price}" required>
            <span id="add_price_span"></span>
        </p>
        <input type="submit" class="add_form_button" value="预约">
        <input type="reset" class="add_form_button" value="重置">
        <input type="button" class="add_form_button" onclick="window.location.href='<%=request.getContextPath()%>/FrontEnd?type=show'" value="返回">
    </form>
</div>
</body>
</html>